<template>
    <div id="login">
        <div class="login-form">
            <a-form
                ref="formRef"
                :label-col="labelCol"
                :model="formState"
                :rules="formRules"
                :wrapper-col="wrapperCol"
            >
                <a-form-item>
                    <img
                        class="logo"
                        src="https://image.huos77.cn/img/favico.svg"
                    />
                    <div class="head">博客后台管理</div>
                    <div class="desc">有些路，只能一个人走</div>
                </a-form-item>
                <a-form-item>
                    <a-input
                        placeholder="账 户 : visitor"
                        v-model:value="formState.account"
                    />
                </a-form-item>
                <a-form-item>
                    <a-input
                        placeholder="密 码 : 123456"
                        v-model:value="formState.password"
                        type="password"
                        @keyup.enter="onSubmit"
                    />
                </a-form-item>
                <a-form-item>
                    <a-checkbox :checked="true"> 记住我 </a-checkbox>
                    <a class="forgot" href=""> 忘记密码 </a>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 24 }">
                    <a-button :loading="load" type="primary" @click="onSubmit">
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script>
import { reactive, ref, h } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { SmileOutlined } from '@ant-design/icons-vue'
import { notification, message } from 'ant-design-vue'
export default {
    setup() {
        const router = useRouter()
        const store = useStore()

        const formState = reactive({
            account: 'visitor',
            password: '123456',
        })

        const formRules = {
            account: [
                { required: true, message: '请输入账户', trigger: 'blur' },
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
            ],
        }
        // 相关响应式数据
        const formRef = ref()
        const load = ref(false)

        const onSubmit = async () => {
            formRef.value
                .validate()
                .then(async () => {
                    load.value = true
                    const r = await store.dispatch('user/login', formState)
                    console.log(r)
                    const role = r.userInfo.role
                    notification.open({
                        message: '欢迎回来',
                        description: `你的身份：${role}`,
                        icon: h(SmileOutlined, {
                            style: 'color: #108ee9',
                        }),
                    })

                    router.push('/dashboard')
                })
                .catch((error) => {
                    load.value = false
                    message.error(error)
                })
        }
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 24 },
            formRules,
            formState,
            onSubmit,
            formRef,
            load,
        }
    },
}
</script>
<style lang="less">
#login {
    width: 100%;
    height: 100%;
    background: url(../../assets/image/background.svg);
    background-size: cover;
    .login-form {
        margin: auto;
        width: 340px;
        min-height: 20px;
        padding-top: 150px;
        .ant-input {
            border-radius: 4px;
            line-height: 42px;
            height: 42px;
        }
        .ant-btn {
            width: 100%;
            height: 42px;
            line-height: 42px;
        }
    }
    .logo {
        width: 60px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        margin-left: 20px !important;
        border: none;
        background-color: transparent;
    }
    .head {
        width: 300px;
        font-size: 30px !important;
        font-weight: 700 !important;
        margin-left: 20px !important;
        line-height: 60px !important;
        margin-top: 10px !important;
        position: absolute !important;
        display: inline-block !important;
        height: 60px !important;
        color: #66a0d7 !important;
    }
    .desc {
        width: 100% !important;
        text-align: center !important;
        color: gray !important;
        height: 60px !important;
        line-height: 60px !important;
    }
    .forgot {
        float: right;
    }
}
</style>
